<template>
	<view class="container">

		<view class="payment-info">
			<text class="section-title">维修信息</text>
			<view class="leftright">
				<view class="left">
					<text>维修单号：</text>
					<text>车主姓名：</text>
					<text>联系方式：</text>
					<text>维修方式：</text>
					<text>取车位置：</text>
					<text>预约日期：</text>
					<text>提交日期：</text>
				</view>
				<view class="right">
					<text>3535252</text>
					<text>张三</text>
					<text>1993829282</text>
					<text>上门取车/到店维修</text>
					<text>山阳区32号</text>
					<text>2020-02-18 19:24:28</text>
					<text>2020-02-18 19:24:28</text>
				</view>
			</view>
		</view>


		<view class="payment-info">
			<text class="section-title">车辆信息</text>
			<view class="leftright">
				<view class="left">
					<text>车辆类型：</text>
					<text>车牌号：</text>
				</view>
				<view class="right">
					<text>大客车</text>
					<text>豫J45323</text>
				</view>
			</view>
		</view>

		<view class="phonew">
			<text>整车照片：</text>
			<uni-file-picker :file-list="wholeCarImages" :mode="'image'" :limit="5" file-mediatype="image"
				@select="onWholeCarImageChange" @delete="(e) => deleteImage('whole', e.index)"
				:disabled="hasArrived"></uni-file-picker>
			<view class="image-gallery">
				<view v-for="(file, index) in wholeCarImages" :key="index" class="image-wrapper">
					<image :src="file.url" class="uploaded-image" mode="aspectFill"
						@click="previewImage(wholeCarImages, index)"></image>
				</view>
			</view>

			<text>维修部位照片：</text>
			<uni-file-picker :file-list="repairPartImages" :mode="'image'" :limit="5" file-mediatype="image"
				@select="onRepairPartImageChange" @delete="(e) => deleteImage('repair', e.index)"
				:disabled="hasArrived"></uni-file-picker>
			<view class="image-gallery">
				<view v-for="(file, index) in repairPartImages" :key="index" class="image-wrapper">
					<image :src="file.url" class="uploaded-image" mode="aspectFill"
						@click="previewImage(repairPartImages, index)"></image>
				</view>
			</view>
		</view>


		<button class="confirm-button" :class="{ 'confirm-button-disabled': hasArrived }"
			@click="showPopup = !hasArrived" :disabled="hasArrived">
			{{ hasArrived ? '已到场' : '确认到场' }}
		</button>

		<view v-if="showPopup" class="popup">
			<view class="popup-content"> <text class="popup-title">确认到场</text>
				<text>请您仔细查看信息</text>
				<text class="popup-message">此操作不可撤销，请谨慎操作。</text>
				<view class="popup-buttons"> <button @click="verifyOrder" class="popup-confirm">确定</button> <button
						@click="showPopup = false" class="popup-cancel">取消</button> </view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				showPopup: false,
				hasArrived: false,
				wholeCarImages: [], // 整车照片列表
				repairPartImages: [], // 维修部位照片列表
			};
		},
		methods: {
			verifyOrder() { // 在这里添加核销逻辑 
				this.hasArrived = true;
				this.showPopup = false;
				uni.showToast({
					title: '已确认到场',
					icon: 'success',
					duration: 2000
				});
			},
			onWholeCarImageChange(e) {
				if (this.hasArrived) return;
				if (e.tempFiles && e.tempFiles.length > 0) {
					const newFiles = e.tempFiles.map(file => ({
						url: file.path || file.url
					}));
					this.wholeCarImages = [...this.wholeCarImages, ...newFiles];
				}
				console.log('整车照片：', this.wholeCarImages);
			},
			onRepairPartImageChange(e) {
				if (this.hasArrived) return;
				if (e.tempFiles && e.tempFiles.length > 0) {
					const newFiles = e.tempFiles.map(file => ({
						url: file.path || file.url
					}));
					this.repairPartImages = [...this.repairPartImages, ...newFiles];
				}
				console.log('维修部位照片：', this.repairPartImages);
			},
			previewImage(imageList, current) {
				const urls = imageList.map(item => item.url);
				uni.previewImage({
					urls: urls,
					current: urls[current]
				});
			},
			deleteImage(type, index) {
				if (this.hasArrived) return;
				if (type === 'whole') {
					this.wholeCarImages.splice(index, 1);
				} else {
					this.repairPartImages.splice(index, 1);
				}
			}
		}
	};
</script>

<style lang="scss">
	.section-title {
		font-weight: bold;
		margin-bottom: 10px;
	}

	.container {
		padding: 20px;
		background-color: #f8f8f8;
	}



	.title {
		font-size: 24px;
		font-weight: bold;
	}

	.order-info,
	.order-details,
	.vehicle-info,
	.repair-photos {
		margin-bottom: 20px;
	}

	.section-title {
		font-weight: bold;
		margin-bottom: 10px;
	}

	.vehicle-image,
	.repair-photo {
		width: 100%;
		height: auto;
	}

	.photo-grid {
		display: flex;
		justify-content: space-between;
	}

	.photo-grid .repair-photo {
		width: 32%;
	}



	.container {
		padding: 20px;
		background-color: #f8f8f8;
	}

	.header {
		text-align: center;
		margin-bottom: 20px;
	}

	.title {
		font-size: 24px;
		font-weight: bold;
	}

	.order-info,
	.service-info,
	.payment-info,
	.additional-info {
		margin-bottom: 20px;
	}

	.section-title {
		font-weight: bold;
		margin-bottom: 10px;
	}

	text {
		display: block;
		margin-bottom: 5px;
	}

	.confirm-button {
		background-color: #007aff;
		color: #fff;
		border: none;
		border-radius: 4px;
		text-align: center;
		width: 80%;
		height: 50px;
	}

	.confirm-button-disabled {
		background-color: #cccccc !important;
		cursor: not-allowed;
		opacity: 0.8;
	}



	.leftright {
		display: flex;
	}

	.left {
		/* border: 1px black solid; */
		width: 30%;
	}

	.right {
		/* border: 1px black solid; */
		margin-left: 30px;
	}



	.popup {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 999;
		/* 添加较高的 z-index */
	}

	.popup-content {
		background-color: #fff;
		padding: 20px;
		border-radius: 10px;
		text-align: center;
		width: 80%;
		position: relative;
		/* 添加相对定位 */
		z-index: 1000;
		/* 确保内容在遮罩层之上 */
	}

	.popup-title {
		font-size: 20px;
		font-weight: bold;
		margin-bottom: 10px;
	}

	.popup-message {
		margin-bottom: 20px;
	}

	.popup-buttons {
		display: flex;
		justify-content: space-around;
	}

	.popup-confirm,
	.popup-cancel {
		/* padding: 10px 20px; */
		background-color: #007aff;
		color: #fff;
		border: none;
		border-radius: 4px;
		height: 50px;
		width: 40%;
	}

	.popup-cancel {
		background-color: #ccc;
	}

	.phonew {
		margin-bottom: 30px;
		background-color: #fff;
		padding: 30rpx;
		border-radius: 8px;
	}

	.phonew text {
		font-size: 28rpx;
		color: #333;
		margin: 20rpx 0;
		display: block;
		font-weight: bold;
	}

	.image-gallery {
		display: flex;
		flex-wrap: wrap;
		gap: 20rpx;
		margin: 20rpx 0;
	}

	.image-wrapper {
		width: calc((100% - 40rpx) / 3);
		background-color: #f5f5f5;
		border-radius: 8rpx;
		overflow: hidden;
	}

	.uploaded-image {
		width: 100%;
		height: 200rpx;
		display: block;
		object-fit: cover;
	}

	.uni-file-picker {
		&[disabled] {
			opacity: 0.6;
			cursor: not-allowed;
		}
	}
</style>